<template>
  <div class="p-5">
    <a-card>
      <a-segmented v-model:value="value" :options="data" />
      <range v-if="value === '范围权限'" />
      <district v-if="value === '片区权限'" />
      <pageTable v-if="value === '页面权限'" />
      <buttons v-if="value === '按钮权限'" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import range from './components/range.vue';
import pageTable from './components/pageTable.vue';
import district from './components/district.vue';
import buttons from './components/buttons.vue';

const data = ref(['范围权限', '按钮权限', '页面权限', '片区权限']);
const value = ref('范围权限');
</script>

<style scoped></style>
